<template>
    <el-container>
        <el-main style="margin-top: -25px;">
        
            <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部订单" name='1'>

                    <template>
                        <el-table
                          :data="tableData"
                          style="width: 100;font-size: 13px;"
                          :row-class-name="tableRowClassName">
                          <el-table-column
                          prop="ordrNumber"
                          label="订单编号"
                          width="200">
                        </el-table-column>

                          <el-table-column
                            prop="orderTime"
                            label="下单时间"
                            width="120">
                          </el-table-column>

                          <el-table-column                   
                            prop="orderuser"
                            label="用户邮箱"
                            width="190">
                          </el-table-column>

                          <el-table-column                   
                          prop="orderMonry"
                          label="总金额"
                          width="100">
                        </el-table-column>

                        <el-table-column                   
                        prop="paymentStatus"
                        label="支付状态"
                        width="100">

                        <template slot-scope="scope">
                          <el-tag
                            :type="scope.row.paymentStatus== 1 ? 'primary' : 'danger'"
                            disable-transitions>{{scope.row.paymentStatus == 1 ? '已支付':'未支付'}}</el-tag>
                        </template>
                      </el-table-column>

                      <el-table-column                   
                      prop="orderStatus"
                      label="订单状态"
                      width="80">

                      
                      <template slot-scope="scope">
                        <el-tag
                          :type="scope.row.orderStatus== 1 ? 'primary' : 'info'"
                          disable-transitions>{{scope.row.orderStatus == 1 ? '已完成':'正常'}}</el-tag>
                      </template>
                    </el-table-column>
                          
                      <el-table-column
                      prop="userAddress"
                      label="地址"
                      width="150"
                      >
                    </el-table-column>

                    <el-table-column 
                    label="操作"
                    width="200"
                    
                    >
                      <template slot-scope="scope">


                        <el-button
                          size="mini"
                          :type="scope.row.deliverGoods== 1 ? 'success' : ''"
                          @click="handleEdit(scope.$index, scope.row)">{{scope.row.deliverGoods == 1 ? '已发货':'去发货'}}</el-button>
                        
                        <el-button
                          size="mini"
                          type="danger"
                          @click="handleDelete(scope.$index, scope.row)">删除</el-button>


                      </template>
                    </el-table-column>



                        </el-table>
                      </template>

                </el-tab-pane>
                <el-tab-pane label="已完成" name = '2'>

                  <template>
                    <el-table
                      :data="tableData"
                      style="width: 100;font-size: 13px;"
                      :row-class-name="tableRowClassName">
                      <el-table-column
                      prop="ordrNumber"
                      label="订单编号"
                      width="200">
                    </el-table-column>

                      <el-table-column
                        prop="orderTime"
                        label="下单时间"
                        width="120">
                      </el-table-column>

                      <el-table-column                   
                        prop="orderuser"
                        label="用户邮箱"
                        width="190">
                      </el-table-column>

                      <el-table-column                   
                      prop="orderMonry"
                      label="总金额"
                      width="100">
                    </el-table-column>

                    <el-table-column                   
                    prop="paymentStatus"
                    label="支付状态"
                    width="100">

                    <template slot-scope="scope">
                      <el-tag
                        :type="scope.row.paymentStatus== 1 ? 'primary' : 'danger'"
                        disable-transitions>{{scope.row.paymentStatus == 1 ? '已支付':'未支付'}}</el-tag>
                    </template>
                  </el-table-column>

                  <el-table-column                   
                  prop="orderStatus"
                  label="订单状态"
                  width="80">

                  
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.orderStatus== 1 ? 'primary' : 'info'"
                      disable-transitions>{{scope.row.orderStatus == 1 ? '已完成':'正常'}}</el-tag>
                  </template>
                </el-table-column>
                      
                  <el-table-column
                  prop="userAddress"
                  label="地址"
                  width="150"
                  >
                </el-table-column>

                <el-table-column 
                label="操作"
                width="200"
                
                >
                  <template slot-scope="scope">


                    <el-button
                      size="mini"
                      :type="scope.row.deliverGoods== 1 ? 'success' : ''"
                      @click="handleEdit(scope.$index, scope.row)">{{scope.row.deliverGoods == 1 ? '已发货':'去发货'}}</el-button>
                    
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>


                  </template>
                </el-table-column>



                    </el-table>
                  </template>

                </el-tab-pane>
                <el-tab-pane label="待发货" name = '3'>

                  <template>
                    <el-table
                      :data="tableData"
                      style="width: 100;font-size: 13px;"
                      :row-class-name="tableRowClassName">
                      <el-table-column
                      prop="ordrNumber"
                      label="订单编号"
                      width="200">
                    </el-table-column>

                      <el-table-column
                        prop="orderTime"
                        label="下单时间"
                        width="120">
                      </el-table-column>

                      <el-table-column                   
                        prop="orderuser"
                        label="用户邮箱"
                        width="190">
                      </el-table-column>

                      <el-table-column                   
                      prop="orderMonry"
                      label="总金额"
                      width="100">
                    </el-table-column>

                    <el-table-column                   
                    prop="paymentStatus"
                    label="支付状态"
                    width="100">

                    <template slot-scope="scope">
                      <el-tag
                        :type="scope.row.paymentStatus== 1 ? 'primary' : 'danger'"
                        disable-transitions>{{scope.row.paymentStatus == 1 ? '已支付':'未支付'}}</el-tag>
                    </template>
                  </el-table-column>

                  <el-table-column                   
                  prop="orderStatus"
                  label="订单状态"
                  width="80">

                  
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.orderStatus== 1 ? 'primary' : 'info'"
                      disable-transitions>{{scope.row.orderStatus == 1 ? '已完成':'正常'}}</el-tag>
                  </template>
                </el-table-column>
                      
                  <el-table-column
                  prop="userAddress"
                  label="地址"
                  width="150"
                  >
                </el-table-column>

                <el-table-column 
                label="操作"
                width="200"
                
                >
                  <template slot-scope="scope">


                    <el-button
                      size="mini"
                      :type="scope.row.deliverGoods== 1 ? 'success' : ''"
                      @click="handleEdit(scope.$index, scope.row)">{{scope.row.deliverGoods == 1 ? '已发货':'去发货'}}</el-button>
                    
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>


                  </template>
                </el-table-column>



                    </el-table>
                  </template>
                </el-tab-pane>


                <el-tab-pane label="待收货" name = '4'>

                  <template>
                    <el-table
                      :data="tableData"
                      style="width: 100;font-size: 13px;"
                      :row-class-name="tableRowClassName">
                      <el-table-column
                      prop="ordrNumber"
                      label="订单编号"
                      width="200">
                    </el-table-column>

                      <el-table-column
                        prop="orderTime"
                        label="下单时间"
                        width="120">
                      </el-table-column>

                      <el-table-column                   
                        prop="orderuser"
                        label="用户邮箱"
                        width="190">
                      </el-table-column>

                      <el-table-column                   
                      prop="orderMonry"
                      label="总金额"
                      width="100">
                    </el-table-column>

                    <el-table-column                   
                    prop="paymentStatus"
                    label="支付状态"
                    width="100">

                    <template slot-scope="scope">
                      <el-tag
                        :type="scope.row.paymentStatus== 1 ? 'primary' : 'danger'"
                        disable-transitions>{{scope.row.paymentStatus == 1 ? '已支付':'未支付'}}</el-tag>
                    </template>
                  </el-table-column>

                  <el-table-column                   
                  prop="orderStatus"
                  label="订单状态"
                  width="80">

                  
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.orderStatus== 1 ? 'primary' : 'info'"
                      disable-transitions>{{scope.row.orderStatus == 1 ? '已完成':'正常'}}</el-tag>
                  </template>
                </el-table-column>
                      
                  <el-table-column
                  prop="userAddress"
                  label="地址"
                  width="150"
                  >
                </el-table-column>

                <el-table-column 
                label="操作"
                width="200"
                
                >
                  <template slot-scope="scope">


                    <el-button
                      size="mini"
                      :type="scope.row.deliverGoods== 1 ? 'success' : ''"
                      @click="handleEdit(scope.$index, scope.row)">{{scope.row.deliverGoods == 1 ? '已发货':'去发货'}}</el-button>
                    
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>


                  </template>

                </el-table-column>



                    </el-table>
                  </template>
                </el-tab-pane>



                <el-tab-pane label="待付款" name = '5'>

                  <template>
                    <el-table
                      :data="tableData"
                      style="width: 100;font-size: 13px;"
                      :row-class-name="tableRowClassName">
                      <el-table-column
                      prop="ordrNumber"
                      label="订单编号"
                      width="200">
                    </el-table-column>

                      <el-table-column
                        prop="orderTime"
                        label="下单时间"
                        width="120">
                      </el-table-column>

                      <el-table-column                   
                        prop="orderuser"
                        label="用户邮箱"
                        width="190">
                      </el-table-column>

                      <el-table-column                   
                      prop="orderMonry"
                      label="总金额"
                      width="100">
                    </el-table-column>

                    <el-table-column                   
                    prop="paymentStatus"
                    label="支付状态"
                    width="100">

                    <template slot-scope="scope">
                      <el-tag
                        :type="scope.row.paymentStatus== 1 ? 'primary' : 'danger'"
                        disable-transitions>{{scope.row.paymentStatus == 1 ? '已支付':'未支付'}}</el-tag>
                    </template>
                  </el-table-column>

                  <el-table-column                   
                  prop="orderStatus"
                  label="订单状态"
                  width="80">

                  
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.orderStatus== 1 ? 'primary' : 'info'"
                      disable-transitions>{{scope.row.orderStatus == 1 ? '已完成':'正常'}}</el-tag>
                  </template>
                </el-table-column>
                      
                  <el-table-column
                  prop="userAddress"
                  label="地址"
                  width="150"
                  >
                </el-table-column>

                <el-table-column 
                label="操作"
                width="200"
                
                >
                  <template slot-scope="scope">


                    <el-button
                      size="mini"
                      :type="scope.row.deliverGoods== 1 ? 'success' : ''"
                      @click="handleEdit(scope.$index, scope.row)">{{scope.row.deliverGoods == 1 ? '已发货':'去发货'}}</el-button>
                    
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>


                  </template>

                </el-table-column>



                    </el-table>
                  </template>
                </el-tab-pane>

              </el-tabs>

        </el-main>      
        </el-container>
    </template>

    <style>
        .el-table .warning-row {
          background: oldlace;
        }
      
        .el-table .success-row {
          background: #f0f9eb;
        }
      </style>

<script>
    export default {
      methods: {

        tableRowClassName({row, rowIndex}) {
          
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }

      },
      data() {
        return {
          tableData: [],
          activeName: '1',
          orderStatus:0,//订单状态
          paymentStatus:0,//付款状态
          deliverGoods:0,//发货状态
          flag:0

        }
     
    },
    mounted:function(){
        this.loadexecution();
      },
      methods: {



        handleClick(index){
  
         if(index.name  == '1')
         {
             this.flag = 0;
             this.loadexecution()
          
         }else if(index.name  == '2')
         {
          this.flag = 1;
          this.orderStatus=1;//订单状态
          this.paymentStatus=1;//付款状态
          this.deliverGoods=1;//发货状态
          this.loadexecution()

         }else if(index.name  == '3'){

          this.flag = 1;
          this.orderStatus=0;//订单状态
          this.paymentStatus=1;//付款状态
          this.deliverGoods=0;//发货状态
          this.loadexecution()

         }else if(index.name  == '4'){

          this.flag = 1;
          this.orderStatus=0;//订单状态
          this.paymentStatus=1;//付款状态
          this.deliverGoods=1;//发货状态
          this.loadexecution()
         }else{
          this.flag = 1;
          this.orderStatus=0;//订单状态
          this.paymentStatus=0;//付款状态
          this.deliverGoods=0;//发货状态
          this.loadexecution()
         }
        },



        async handleDelete(index, row) {

          
          if(this.tableData[index].deliverGoods == 1){
          this.utils.success("当前订单已经发货成功!暂时无法删除该订单信息!");
          return;
          }

          if(this.tableData[index].paymentStatus == 1){
          this.utils.success("当前订单已经付款成功!暂时无法删除!");
          return;
          }

          const {data:res} = await this.$http.post('person/DeteleOrder',this.$qs.stringify({id:row.id}));
          if(res.success==true){
            this.tableData.splice(index, 1)
            this.utils.success("删除成功!")
          }
        },




        
        async handleEdit(index, row) {


          if(this.tableData[index].paymentStatus == 0)
          {
            this.utils.success("当前订单没有完成支付!无法发货!");
            return;
          }

          if(this.tableData[index].deliverGoods == 1){
            this.utils.success("当前订单已发货成功! 请勿重复发货!");
            return;
          }else{
            const {data:res} = await this.$http.post('person/uporderDate',this.$qs.stringify({id:row.id}));
            if(res.success==true){
            this.utils.success("发货成功!")
            this.tableData[index].deliverGoods = 1
          }
          }

        },




        async hand1(){

          const {data:res} = await this.$http.post('person/findOrder')
          if(res.success==true){
             this.tableData = res.result
             console.log(this.tableData)
          }else{
              this.utils.error("查询失败!")
          }

        },


        
        async hand2(){

          const {data:res} = await this.$http.post('person/findOrderList',this.$qs.stringify({orderStatus:this.orderStatus,paymentStatus:this.paymentStatus,deliverGoods:this.deliverGoods}))
          if(res.success==true){
             this.tableData = res.result
             console.log(this.tableData)
          }else{
            this.utils.error("查询失败!")
          }

        },



          async loadexecution(){
          
          if(this.flag == 0)
          {
              this.hand1()
          }else{
            this.hand2()
          }

},





}

    }
  </script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

</style>